export const pointerEcharts = () => {
    return `

    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  let value = 20.66;
let title = '%';
  const state = reactive({
    option:{
    series: [
        {
            name: '内层数据刻度',
            type: 'gauge',
            radius: '80%',
            center: ['50%', '50%'],
            axisLine: {
              roundCap :false,
                lineStyle: {
                    width: 30,
                    color: [

                        [1,new echarts.graphic.LinearGradient(
                  0,0, 1, 0, [
                  {
                     offset: 0,
                     color: '#1D71EF',
                  },
                  {
                     offset: 1,
                     color:'#4FD2FD',
                  }
                  ]
                )]
                    ],
                    
                }
            },
            splitLine: {
                length: 25,
                 distance:-30,
                lineStyle: {
                    width: 5,
                    color: '#ffffff'
                }
            },
            axisTick: {
               
              distance:-30,
                lineStyle: {
                    width: 2,
                    color: '#ffffff'
                }
            },
            axisLabel: {
                color: '#AAC0EE',
                distance: 40,
                fontSize: 20,
            },
            title: { //标题
                show: true,
                offsetCenter: [0, 84], // x, y，单位px
                textStyle: {
                    color: "red",
                    fontSize: 14, //表盘上的标题文字大小
                }
            },
            detail: {
                show: true,
                offsetCenter: ['0','90%'],
                fontSize: 20,
                color: '#26C0C8'
            },
            itemStyle: {
                normal: {
                    color: '#0EB6CC'
                }
            },
            pointer: {
                width: 6,
                length: '55%',
                itemStyle:{
                  color:"#E1F5FF"
                }
            },
           
            data: [
            {
                name: "",
                value: 30
            },
              
            ],
            silent: false
        },
  
    ]
}
    
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    
    
  
  
    
    
    
  
  
    
    `;
  };
  